<template>
  <div>
    <div class="selectr">
      选择教室：
      <el-cascader
        v-model="classroom"
        placeholder="试试搜索：101"
        :options="options"
        filterable
        clearable
        :props="SetKesDept"
        @change="elect"
      ></el-cascader>
     
      <el-button @click="btn">
        点击
      </el-button>
    </div>
    <div class="contentVideo">
      <!-- <div class="tree">
        <h3>设备列表</h3>
        <el-tree
          :data="options"
          :props="SetKesDept"
          default-expand-all
          accordion
          @node-click="handleNodeClick"
        >
        </el-tree>
      </div> -->
      <div class="dirllList">
        <zhu-video
          v-for="ite in flvPlayerList"
          :key="ite.id"
          :ite="ite"
        ></zhu-video>
        <!--         
        <div
          v-for="ite in flvPlayerList"          
          :key="ite.id"
          class="video"
        >
          <video
            :id="ite.id"
            :ref="ite.id"
            :rl="ite.url"
            autoplay
            muted
            controls="controls"
            preload="auto"
            width="100%"
            height="100%"
            poster="/static/images/spbg.png"
            @click="playRtmp"
          ></video>
        </div> -->
      </div>
    </div>
  </div>
</template>
<script>

import ZhuVideo from "@/components/ZhuVideo"
import { treeEq, queryeroom } from "@/api";
export default {
  components:{ZhuVideo},
  data() {
    return {
      flvPlayerList: [
        { id: "video1", url: "http://117.160.141.22:6055/live?port=1935&app=myapp&stream=1001" },
        { id: "video2", url: "http://117.160.141.22:6055/live?port=1935&app=myapp&stream=108" },
        { id: "video3", url: "http://117.160.141.22:6055/live?port=1935&app=myapp&stream=108" },
        { id: "video4", url: "http://117.160.141.22:6055/live?port=1935&app=myapp&stream=1001" }
      ],
      flvPlayer: null,
      dialogShowed: false,
      errorMessage: "加载失败",
      isLoading: false,
      isSuccess: false,
      options: [],
      classroom: "",
      steps2: [], // 备用考试机器列表
      infoval: "",
      testInfor: [],
      SetKesDept: {
        value: "id",
        label: "title",
      }, //自定义  级联选择器value label
    };
  },
  mounted() {
    treeEq().then((res) => {
      this.options = res.data;
    });
  },
   activated() {
     console.log("video 启动");
   },
  methods: {
    elect(value) {
      queryeroom({ roomId: value[1] }).then((res) => {
        this.testInfor = res.data;
      });
    },
    testChange(val) {
      console.log(val);
    },
    handleNodeClick(data) {
      // tree 树下拉事件
      if (!data.children) {
        console.log(data);
      }
    },

    btn() {
      this.flvPlayerList[2].url="http://117.160.141.22:6055/live?port=1935&app=myapp&stream=1001"
      this.flvPlayerList[3].url="http://117.160.141.22:6055/live?port=1935&app=myapp&stream=108"
// console.log(this.flvPlayerList[2]);
      
    },



    clickhandleitem(data, index) {
      // let ip = data.ipAddress;
      // let admin = data.videoname;
      // let password = data.videopas;

      this.url = this.rtsplist[index].rtsp;
      console.log(this.flvPlayerList, "flvPlayerList");
      if (this.flvPlayerList.length > 3) {
        this.destoryVideo(this.flvPlayerList[0]);
        this.flvPlayerList.shift();
      }
      this.createVideo();
      console.log(index);
      this.count > 3 ? (this.count = 1) : this.count++;
      console.log(this.count);
    },

   
  }
};
</script>

<style lang="scss" scoped>
.selectr {
  text-align: left;
  font-size: 16px;
  text-indent: 5px;
  padding-bottom: 10px;
  // border-bottom: 1px solid #bbb;
  box-shadow: 0px 5px 5px -5px #666;
  margin-bottom: 10px;
}
.contentVideo {
  display: flex;
  height: calc(84.4vh + 15px);
  .tree {
    width: 20%;
    margin-right: 15px;
    background: #f2f2f2;
    h3 {
      background: #18a5a5;
      padding: 10px;
      color: #fff;
    }
    .el-tree {
      padding: 10px;
      height: 100%;
      background: none;
      color: #666;
    }
  }
  .dirllList {
    width: 100%;
    box-sizing: border-box;
    .video {
      float: left;
      padding: 10px;
      box-sizing: border-box;
      width: calc(50% - 8px);
      height: 40vh;
      // background: #eee;
      margin-bottom: 15px;
      margin-right: 15px;
      &:nth-child(even) {
        margin-right: 0;
      }
    }
  }
}
</style>
